<template>
  <!-- 1. 不是外链 使用IconifyIcon-->
  <IconifyIcon
    :class="svgClass"
    :icon="iconName"
    v-if="!isExt"
    v-bind="$attrs"
  />
  <!--2. 是外链
      方法一，可以通过请求svg的方式来渲染
      方法二，css 通过 mask 渲染svg 图标 兼容性不好，现在项目用就是这个
  -->
  <div
    v-else
    :style="styleExternalIcon"
    :class="svgClass"
    bg-current
    v-bind="$attrs"
  ></div>
</template>
<script setup lang="ts">
// 3. 判断是链接，返回true，图标名 false
import { isExternal } from "@/utils/validate"
// 4. 没有配自动导入，要手动引入
import { Icon as IconifyIcon } from "@iconify/vue"
// Vue3.5的解构属性不支持

// defineProps写法一  设置默认值的写法，这种解构属性是没有响应式的，要props.属性，才有响应式
// const props = withDefaults(
//   defineProps<{
//     iconName: string
//     customClass?: string
//   }>(),
//   {
//   // customClass 给与默认值 '',不然在父组件，不传的话会报ts错误
//     customClass: ""
//   }
// )

// defineProps写法二，没有默认值，通过泛型描述，这种解构属性是有响应式
// const { iconName, customClass } = defineProps<{
//   iconName: string
//   customClass?: string
// }>()

// 定义props // defineProps写法三，vue2写法，结构会导致类型丢失
// import { PropType } from "vue"

// const { customClass } = defineProps({
//   customClass: Object // customClass 类型是个 对象。结构后customClass变成类型any
//   customClass: Object as PropType<{ a: 1; b: 2 }> // 需要用as 断言才行
// })
// 4. defineProps写法四，解构属性是有响应式
const {
  //
  iconName,
  // 自定义样式
  customClass
} = defineProps({
  iconName: {
    type: String,
    default: ""
  },
  customClass: {
    type: String,
    default: ""
  }
})
// 5.
const isExt = computed(() => isExternal(iconName))
// 6.
// 组合成的类名 = 自定义类名 + 默认类名 ===> class="customClass + icon"
const svgClass = computed(() => (customClass ? `icon ${customClass}` : "icon"))
// 7.
// 通过 mask 渲染svg 图标 兼容性不好，可以通过请求svg的方式来渲染
const styleExternalIcon = computed(() => ({
  mask: `url(${iconName}) no-repeat 50% 50%`,
  "-webkit-mask": `url(${iconName}) no-repeat 50% 50%`,
  "mask-size": "cover"
}))
</script>
<!-- 在实现图标的时候 尽量采用svg， 不要采用font图标 -->
